;(function($){
	
	function changeHash(idName){
		document.querySelector(idName).scrollIntoView(true);
	};

	$.fn.letters_navigation = function(opts){
		var el = this;
		var opt = {
			ds : [],
			nav_key : "",
			width : 100,
			height : 325,
			a_pre_id : "groupbyPlace_",//前缀ID
			dataBack : function(){},
			closeBack : function(){},
		}
		var param = $.extend(opt,opts);
		var app = new App(el,param);
	}
	
	var App = function(el,param){
		this.el = el;
		this.param = param;
		this.initHtml();
		this.bindEvent();
	}
	
	App.prototype = {
		bindEvent : function(){
			var el = this.el;
			var param = this.param;
			var t = this;
			
			
		},
		initHtml : function(){
			var el = this.el;
			var param = this.param;
			var t = this;
			
			var html = 	'<style>'+
							'ul.lettersNavgation li:before{'+
								'content : "";'+
							'}'+
							'.lettersNavigation::-webkit-scrollbar{'+
								'width:0px;'+
							'}'+
						'</style>'+
						'<div class="lettersNavigation" style="width:'+param.width+'px;height:'+param.height+'px;overflow-y:auto;background:#6c6c6c;">'+
							'<ul class="lettersNavgation" style="list-style-type:none;zoom:180%;margin:0;text-align:center;">';
			var navDs = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N",
					  	"O","P","Q","R","S","T","U","V","W","X","Y","Z"];
			
			$(param.ds).each(function(k,v){
				//全部导航字母
//				html += '<li>'+
//							'<a href="#'+v+'" style="color:white;">'+v+'</a>'+
//						'</li>';
				//根据数据源添加导航字母
				var index = jQuery.inArray(v[param.nav_key],navDs);
				
				if(index>-1){
					html += '<li >'+//href="#'+param.a_pre_id+v[param.nav_key]+'"
//								'<a href="javascript:void(0);" data-id="'+param.a_pre_id+v[param.nav_key]+'" style="color:white;">'+v[param.nav_key]+'</a>'+
								'<span data-id="'+param.a_pre_id+v[param.nav_key]+'" style="color:white;cursor:pointer;">'+v[param.nav_key]+'</span>'+
							'</li>';
					navDs.splice(index, 1); 
				}
			});
			html += '</ul></div>';
			el.html(html);
			t.changeHash();
		},
		changeHash : function(){
			var el = this.el;
			var param = this.param;
			var t = this;
		    el.find("span").unbind("click").click(function(){
		    	var id = $(this).data("id");
		    	document.querySelector("#"+id).scrollIntoView(true);
		    })
		}
	}
})(jQuery);